<template>
  <div class="homepage_container">
    <div class="homepage_header">
      <h3 class="header_title">0元购运营后台系统</h3>
      <el-icon class="header_icon">
        <component :is="isCollapse ? 'Fold':'Expand'" @click="changeCollapse"></component>
      </el-icon>
      <div class="header_dropdown">
        <el-row :gutter="1">
          <el-col :span="12" style="text-align: center">
            <el-avatar shape="square" size="small" :src="adminInfo.icon"/>
          </el-col>
          <el-col :span="12">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ adminInfo.username }}
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-menu
        class="homepage_menu"
        style="height: 100%"
        active-text-color="#ffd04b"
        background-color="#304156"
        default-active="2"
        text-color="#fff"
        @open=""
        @close=""
        :unique-opened="true"
        :router="true"
        :collapse="isCollapse"
    >
      <el-menu-item index="/index">
        <el-icon>
          <Discount/>
        </el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu :index="item.id + ''" v-for="item in adminInfo.menus" :key="item.id">
        <template #title>
          <el-icon>
            <Discount/>
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <template v-for="submenu in item.children">
          <el-menu-item :index="'/'+item.name+'/' + submenu.name" v-if="!submenu.hidden" :key="submenu.id">
            <el-icon>
              <Discount/>
            </el-icon>
            {{ submenu.title }}
          </el-menu-item>
        </template>
      </el-sub-menu>
    </el-menu>
    <div :class="{'homepage_content':true, 'w65': isCollapse}">
      <div class="router_content">
        <breadcrumb></breadcrumb>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, toRefs, ref, computed, watch} from 'vue'
import {useStore} from 'vuex'
import Cookies from 'js-cookie'
import {useRouter} from 'vue-router'
import breadcrumb from '../../components/breadcrumb.vue'


const state = reactive<{
  adminInfo: AdminInfoItf,
  isCollapse: boolean
}>({
  adminInfo: {
    menus: []
  },
  isCollapse: false,
})

const {adminInfo, isCollapse} = toRefs(state)

interface MenuObj {
  parentId: number;
  id: number;
  title: string;
  children?: MenuObj[],
  hidden: number,
  name: string
}

interface NewMenus {
  [key: number]: MenuObj
}

const store = useStore();
// computed解决刷新菜单空白问题
//const newMenus = computed<NewMenus>(() => store.getters.getNewMenus);
/*const newMenus = computed<MenuListItf>(() => {
  const obj = store.getters.getAdminInfo.menus
  console.log(obj)
  return obj
});*/
adminInfo.value = computed<AdminInfoItf>(() => store.getters.getAdminInfo).value;


// 监听事件，监听某个值的变化
watch(adminInfo, (newValue, oldValue) => {
  console.log("新值：", newValue)
  console.log("旧值：", oldValue)
})

// 收缩菜单栏
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value
}

const router = useRouter();
// 退出
const logout = () => {
  // 删除cookie
  Cookies.remove("token")
  // 返回登录页
  router.push('/login')
}
</script>

<style lang="less" scoped>
.homepage_container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.homepage_header {
  height: 70px;
  background-color: #409eff;
}

.header_icon {
  display: inline-block;
  line-height: 70px;
  color: #fff;
  font-size: 20px;
}

.header_title {
  display: inline-block;
  padding: 0 20px;
  line-height: 70px;
  font-weight: 400;
  font-size: 24px;
  color: #fff;
}

.header_dropdown {
  float: right;
  margin-top: 25px;
  margin-right: 20px;
  color: #fff;
}

.homepage_menu {
  position: absolute;
  top: 70px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}

.homepage_menu:not(.el-menu--collapse) {
  width: 250px;
}


.homepage_content {
  position: absolute;
  top: 70px;
  right: 0;
  left: 250px;
  bottom: 0;
  transition: all .3s ease-in-out;
  overflow-y: auto;
}

.w65 {
  left: 65px;
}

.router_content{

}
</style>
